<!-- 导航 -->
<template>
  <div ref="header" class="header">
    <div class="left">
      <!-- 图标 -->
      <img :src="img" alt="" />
      <!-- 选项 -->
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="goRouter(item.path)">
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="center">
      <div class="title">{{ title }}</div>
    </div>
    <div class="right">
      <div class="minimize" @click="min">
        <component :is="zuixiaohua"></component>
      </div>
      <div class="maximize" @click="max">
        <component :is="zuidahua1" v-if="!isMax"></component>
        <component :is="zuidahua2" v-else></component>
      </div>
      <div class="closure" @click="close">
        <component :is="guanbi"></component>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  // https://microsoft.github.io/vscode-codicons/dist/codicon.html
  import zuidahua1 from '@vscode/codicons/src/icons/chrome-maximize.svg';
  import zuidahua2 from '@vscode/codicons/src/icons/chrome-restore.svg';
  import zuixiaohua from '@vscode/codicons/src/icons/chrome-minimize.svg';
  import guanbi from '@vscode/codicons/src/icons/chrome-close.svg';
  let { getCurrentWindow } = require('@electron/remote');
  let title = ref('markdown-k');
  let router = useRouter();
  let img = './favicon.ico';
  let win = getCurrentWindow();
  let isMax = ref(win.isMaximized());
  let header = ref();
  let list = [
    {
      name: '首页',
      path: '/',
      title: 'markdown-k'
    },
    {
      name: '设置',
      path: '/setting',
      title: '设置 - markdown-k'
    }
  ];

  function goRouter(path: string) {
    title.value = (list.find(item => item.path === path) as { name: string; path: string; title: string }).title;
    return router.push(path);
  }

  function min() {
    win.minimize();
  }
  function max() {
    if (win.isMaximized()) {
      win.unmaximize();
    } else {
      win.maximize();
    }
  }

  win.on('maximize', () => {
    isMax.value = true;
  });
  win.on('unmaximize', () => {
    isMax.value = false;
  });

  win.on('enter-full-screen', () => {
    let $ref = header.value as HTMLElement;
    $ref.style.display = 'none';
  });
  win.on('leave-full-screen', () => {
    let $ref = header.value as HTMLElement;
    $ref.style.display = 'flex';
  });
  onMounted(() => {
    if (win.isFullScreen()) {
      let $ref = header.value as HTMLElement;
      $ref.style.display = 'none';
    } else {
      let $ref = header.value as HTMLElement;
      $ref.style.display = 'flex';
    }
  });

  function close() {
    win.close();
  }
</script>

<style scoped lang="scss">
  .header {
    -webkit-user-select: none;
    user-select: none;
    -webkit-app-region: drag;
    height: 30px;
    background-color: var(--header-backgroundColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    .left {
      display: flex;
      // justify-content: center;
      align-items: center;
      height: 100%;
      width: calc(100% / 3);
      img {
        margin-left: 8px;
        width: auto;
        height: 70%;
      }
      ul {
        padding: 0 10px;

        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100px;
        height: 100%;
        li {
          cursor: pointer;
          -webkit-app-region: no-drag;
          width: 100%;
          height: 80%;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          &:hover {
            background-color: var(--header-hoverBackgroundColor);
          }
          span {
            font-size: 14px;
            color: var(--header-fontColor);
            margin: 0 10px;
            //禁止换行
            white-space: nowrap;
          }
        }
      }
    }
    .center {
      width: calc(100% / 3);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      .title {
        font-size: 14px;
        color: var(--header-fontColor);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .right {
      width: calc(100% / 3);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: right;

      div {
        -webkit-app-region: no-drag;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 45px;
        cursor: pointer;

        svg {
          width: 15px;
          height: 15px;
          fill: var(--header-iconColor) !important;
        }

        &:hover {
          background-color: var(--header-hoverBackgroundColor);
        }

        &.closure:hover {
          background-color: var(--header-close-hoverBackgroundColor);

          svg {
            fill: var(--header-close-hoverIconColor) !important;
          }
        }
      }
    }
  }
</style>
